<template>
	<u-popup :show="show" @close="$emit('update:showPopup',false)" @open="openPopup" round="20">
		<view class="payfor-container">
			<view class="payfor-container-title">
				添加{{titleObj[form.payment_type]}}
			</view>
			<view class="payfor-container-title title2">
				请输入您的{{titleObj[form.payment_type]}}信息
			</view>
			<view class="payfor-container-form">
				<u--form labelPosition="left" labelWidth="180rpx" :model="form" :rules="rules" ref="uForm">
					<u-form-item v-for="(item,index) in formList" :key="index" :label="item.label" :prop="item.prop"
						borderBottom ref="item1">
						<u--input v-model="form[item.prop]" border="none" :placeholder="'请输入'+item.label"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="form-button">
				<u-button class="button" color="#ff7a00" type="primary" text="确定" shape="circle"
					@click="submit"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		publicConfig
	} from '@/api'
	export default {
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		props: {
			formList: {
				type: Array,
				default: () => []
			},
			showPopup: {
				type: Boolean,
				default: false
			},
			formObj: {
				type: Object,
				default: () => {}
			},
		},
		watch: {
			showPopup(n) {
				this.show = n
			},
			formObj: {
				async handler(n) {
					for (const key in n) {
						this.form[key] = n[key]
					}
				},
				deep: true
			},
		},
		data() {
			return {
				show: false,
				titleObj: {
					'weixin': '微信',
					'zhifubao': '支付宝',
					'yinlian': '银行'
				},
				form: {
					money: '',
					memo: '',
					payment_type: '',
					payment_account: '',
					payment_name: '',
					payment_bank: '',
					payment_bank_branch: '',
				},
				rules: {
					'payment_bank_branch': {
						type: 'string',
						required: true,
						message: '请输入开户行',
						trigger: ['blur', 'change']
					},
					'payment_bank': {
						type: 'string',
						required: true,
						message: '请输入银行',
						trigger: ['blur', 'change']
					},
					'payment_name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'payment_account': {
						type: 'string',
						required: true,
						message: '请输入卡号',
						trigger: ['blur', 'change']
					},
					'memo': {
						type: 'string',
						message: '请输入备注',
						trigger: ['blur', 'change']
					},

				},
			}
		},
		methods: {
			async submit() {
				await this.$refs.uForm.validate()
				const {
					code,
					msg
				} = await publicConfig('postApplyWithdrawal', this.form)
				this.toast(msg)
				if (code == 1) {
					setTimeout(() => {
						this.back()
					}, 1000)
				}
			},
			async openPopup() {
				const objType = {
					'weixin': '微信账号',
					'zhifubao': '支付宝账号',
					'yinlian': '卡号'
				}
				this.rules['payment_account'].message = `请输入${objType[this.form.payment_type]}`
				await this.$nextTick()
				this.$refs.uForm.setRules(this.rules)
			},
		}

	}
</script>

<style lang="scss" scoped>
	// 弹窗样式
	.payfor-container {
		color: #333333;
		background-color: #F2F4F6;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		&-title {
			background-color: #fff;
			text-align: center;
			font-size: 33rpx;
			line-height: 110rpx;

		}

		.title2 {
			background-color: transparent;
			text-align: left;
			padding: 0 40rpx;
		}

		&-form {
			margin: 0 40rpx;
			background-color: #fff;
			padding: 0 30rpx;
			border-radius: 30rpx;
		}
	}

	.form-button {
		padding: 100rpx
	}

	/deep/.u-form-item__body {
		height: 100rpx
	}
</style>